import 'package:flutter/material.dart';
import 'package:get/get.dart';
import 'package:jinke/utils/util.dart';

import '../../utils/component/component.dart';
import 'logic.dart';

class LoginPage extends StatelessWidget {
  final logic = Get.put(LoginLogic());
  final state = Get.find<LoginLogic>().state;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.white,
      body: SizedBox(
        width: 1.sw,
        child: Column(

          children: [
            Container(
              child: Image.asset('assets/images/logo.png',width: 88.r,height: 88.r,),
              margin: EdgeInsets.only(top: 70.r,bottom: 20.r),
              decoration: BoxDecoration(
                  boxShadow: [
                    BoxShadow(
                        offset: const Offset(1, 1),//x,y轴
                        color: const Color(0x1A071428),//投影颜色
                        blurRadius: 4.r//投影距离
                    )
                  ]
              ),
            ),
            Text('欢迎来到金科招引~',style: TextStyle(color: const Color(0xff333333),fontSize: 20.r ,fontWeight: FontWeight.bold),),
            Container(margin: EdgeInsets.only(left: 38.r,right: 38.r,top: 56.r,bottom: 3.r),child: Row(children: [
              Image.asset('icon_gerem.png'.imgPathLogin,width: 20.r,height: 20.r),
              SizedBox(width: 8.r,),
              Expanded(child: TextField(
                controller: state.accountCtrl,
                decoration: InputDecoration(
                  border: InputBorder.none,
                  hintText: '请输入您的账号',
                  hintStyle: TextStyle(fontSize: 15.r,color: const Color(0xffbbbbbb)),
                ),
              )),
            ],),),
            Divider(
              height: 10.r,
              color: const Color(0xffe7e7e7),
              thickness: 1.r,
              indent: 38.r,
              endIndent: 38.r,),
            Container(margin: EdgeInsets.only(left: 38.r,right: 38.r,top: 20.r,bottom: 3.r),child: Row(children: [
              Image.asset('icon_yanzhengma.png'.imgPathLogin,width: 20.r,height: 20.r),
              SizedBox(width: 8.r,),
              Obx(() => Expanded(child: TextField(
                controller: state.pwdCtrl,
                obscureText: !state.isShowPsw.value,
                decoration: InputDecoration(
                  border: InputBorder.none,
                  hintText: '请输入您的密码',
                  hintStyle: TextStyle(fontSize: 15.r,color: const Color(0xffbbbbbb)),
                ),
              ))),
              GestureDetector(
                onTap: (){
                  state.isShowPsw.value = !state.isShowPsw.value;
                },
                child: Icon(Icons.remove_red_eye_outlined,color: const Color(0xff666666),size: 18.r,),
              )
            ],),),
            Divider(
              height: 10.r,
              color: const Color(0xffe7e7e7),
              thickness: 1.r,
              indent: 38.r,
              endIndent: 38.r,),
            GestureDetector(
              child: Container(
                margin: EdgeInsets.only(top: 40.r),
                width: 300.r,
                height: 44.r,
                decoration: BoxDecoration(
                    gradient: const LinearGradient(      //渐变位置
                        begin: Alignment.centerLeft, //右上
                        end: Alignment.centerRight, //左下
                        stops: [0.0, 1.0],         //[渐变起始点, 渐变结束点]
                        //渐变颜色[始点颜色, 结束颜色]
                        colors: [Color(0xff00A9FE), Color(0xFF0173FE)]
                    ),
                    borderRadius: BorderRadius.circular(4.r)
                ),
                child: Center(child: Text('立即登录',style: TextStyle(color: Colors.white,fontSize: 15.r),),),
              ),
              onTap: ()=>logic.login(state.accountCtrl.text, state.pwdCtrl.text),
            ),
            Expanded(child: Image.asset('bg_denglu.png'.imgPathLogin,width: 1.sw,fit: BoxFit.cover,)),
          ],
        ),
      ),
    );
  }
}
